<template>
  <ul class="activeList">
    <li v-for="(item,index) in avtiveInfos" :key="index">
      <router-link :to="{name:'Article',params:{bloggerId:item.bloggerId}}">
        <img :src="item.articlePic" alt>
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {
  name: "ActiveList",
  data() {
    return {
      avtiveInfos: []
    }
  },
  mounted() {
    var that = this;
    var flag = true;
    that.$axios.get("http://localhost:3000/api/articles?count=5")
    .then(res => {
      // console.log(res.data)
      that.avtiveInfos = res.data;
      // console.log(avtiveInfos)
    })
    .catch(error => {
      console.log(new error(error))
    });

    // 加载更多处理
    window.addEventListener("scroll",function(){
      if(document.documentElement.scrollTop + window.innerHeight >= document.body.offsetHeight){
        if(flag==true){
          flag = false;
          that.$axios.get("http://localhost:3000/api/articles?count=5")
          .then(res => {
            // console.log(res.data)
            that.avtiveInfos = that.avtiveInfos.concat(res.data);
            flag = true;
            // console.log(avtiveInfos)
          })
          .catch(error => {
            console.log(new error(error))
          });
        }
      }
    })
  }
}
</script>

<style lang="less" scoped>
  .activeList{
    
    width: 96%;
    margin: 30px auto 0;
    position: absolute;
    top: 70px;
    left: 2%;
    li{
      background-color: #fff;
      padding: 10px;
      border-radius: 10px;
      box-shadow: 0 2px 20px rgba(0,0,0,.15);
      margin-bottom: 10px;
    }
    img{
      width: 100%;
      height: 100%;
    }
  }
</style>


